<!DOCTYPE html>
<html lang="zh-CN" class="uk-height-1-1">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="hostname" content="feling.net">
    <meta name="description" content="聆熵在线工具——在开发过程中，工程师们常常需要人工查看 json 数据。格式验证的目的，就是将一串难以阅读的文字，调整成人类友好的格式，便于人们阅读。">
    <meta name="keywords" content="base64编码解码,json格式验证,base64图片">
    <meta name="robots" content="all">
    <meta name="author" content="feling.net">
    <title>base64编码解码，json格式验证，base64图片—聆熵信息</title>
    <link rel="stylesheet" href="//cdn.feling.net/css/uikit.min.css" media="all">
    <link rel="icon" type="image/png" href="//cdn.apihub.net/img/favicon.png">
    <script src="//cdn.apihub.net/js/jquery-3.3.1.min.js"></script>
    <script src="//cdn.apihub.net/js/vue.min.js"></script>
    <script src="//cdn.feling.net/js/uikit.min.js"></script>
</head>

<body class="uk-height-1-1">
    <header>
        <!-- 浏览器兼容性检测 -->
        <div id="iiie"></div>
        <script>
            IIIE = new Vue({el:"#iiie"});
        </script>
        <script>
            if (typeof IIIE == 'undefined') {
                alert("该网页不支持您的浏览器版本，推荐使用 chrome 浏览器")
            }
        </script>

        <!-- 网络联通性检测 -->
        <div id="the-gfw"></div>
        <script>
            let gfw_tester = $.ajax({
                url: "https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=xxx", 
                complete: function (data) {
                    if (data.statusText !== "timeout") {
                        $('#the-gfw').trigger('passible')
                    }
                },
                timeout: 2000
            });
        </script>

        <nav class="uk-navbar">
            <div href="/" class="uk-navbar-brand" 
                onmouseover="$('#brand-img').addClass('brand-img-animation')"
                onmouseout="$('#brand-img').removeClass('brand-img-animation')">
                <img id="brand-img" class="brand-img-animation"  alt="logo"
                    width="28px;" height="28px;" src="//cdn.apihub.net/img/spinner.png">
                    <span class="uk-visible-large">聆熵信息</span>
                </div>
            <style>
                .brand-img-animation {
                    animation: uk-rotate 0.8s;
                    animation-delay:0.4s;
                }
            </style>
            <ul class="uk-navbar-nav">
                <li class="uk-active"><a disabled>首页</a></li>
                <li><a href="/">产品中心</a></li>
                <li><a href="/about.html">关于我们</a></li>
                <li><a href="/contact.html" rel="nofollow">联系我们</a></li>
            </ul>
            <div class="uk-navbar-flip">
                <ul class="uk-navbar-nav" id="disqus_thread_modal_entrance">
                    <li><a href="#disqus_thread_modal" rel="nofollow" data-uk-modal>反馈与意见</a></li>
                </ul>
                <div id="disqus_thread_modal" class="uk-modal">
                    <div class="uk-modal-dialog">
                        <a class="uk-modal-close uk-close"></a>
                        <div id="disqus_thread">您的网络环境无法加载 disqus 的评论模块</div>
                    </div>
                    <script>
                        var disqus_config = function () {
                            this.page.url = "https://feling.net/";
                            this.page.identifier = "https://feling.net/";
                        };
                        $('#the-gfw').on('passible', function() {
                            var d = document, s = d.createElement('script');
                            s.src = '//feling.disqus.com/embed.js';
                            s.setAttribute('data-timestamp', + new Date());
                            (d.head || d.body).appendChild(s);
                        });
                    </script>
                </div>
            </div>
        </nav>
    </header>
    <hr style="margin:0;">

    <div id="content" style="
            min-height:calc(100% - 90px - 40px - 17px);
            padding-top: 15px;
            padding-right: 15px;
            overflow-x: hidden;">
        <style>
            @media(max-width:760px) {
                #json-format-intro {
                    padding-left: 15px;
                    padding-right: 0px;
                }
            }
            @media(min-width:760px) {
                #json-format-intro {
                    padding-left: 60px;
                    padding-right: 45px;
                }
            }
        </style>
        <div id="json-format-intro" class="uk-text-center">
            <h1><a href="/json/">在线 JSON 格式化</a>，让前后端联调更简单 </h1>
            <!-- <img style="margin-bottom: 35px;box-shadow: 2px 2px 5px #ccc;" src="//cdn.feling.net/images/json-intro-h1.png"> -->
            <figure class="uk-overlay">
                <img alt="json intro" style="border-top-left-radius: 5px;border-top-right-radius: 5px;" src="//cdn.feling.net/images/json-intro.gif">
                <figcaption class="uk-overlay-panel uk-overlay-bottom uk-overlay-background uk-text-center">
                    <a href="/json/" style="color: #fff;">立即体验 -- 在线 JSON 格式化</a>
                </figcaption>
            </figure>
            <h2>什么是 JSON ?</h2>
            <div class="uk-text-left" >
                <p>
                    JSON 全称： JavaScript Object Notation，最早用于 JavaScript 语言中，描述对象的存在结构。 <br>
                    在现代 web 开发中，常用到前后端分离的架构。前端更专注于展示、交互的设计，后端更专注于业务逻辑的处理。而前后端之间沟通交互的桥梁就是 json 字符串。<br>
                    作为一种字符串的格式规范，json 比起早年常用的 xml 格式的字符串，更加简洁、高效、更容易阅读，在使用编程语言进行编码、解码时也更加方便。<br><br>
                </p>
            </div>
            <h2>格式化有什么用？</h2>
            <div class="uk-text-left" >
                <p>
                    虽然 json 字符串的主要应用场景之一是前后端数据交互，是给机器阅读的一种格式规范。但在开发过程中，工程师们常常需要人工查看 json 数据。<br>
                    格式化的目的，就是将一串难以阅读的文字，调整成人类友好的格式，便于人们阅读。普遍的做法有：
                    <div>
                        <div style="display: inline-block" >
                            &nbsp;&nbsp;&nbsp;&nbsp;1. 添加空白符 ( 换行、空格、缩进 ) <br>
                            &nbsp;&nbsp;&nbsp;&nbsp;2. 标记不同的颜色 ( 高亮 )<br>
                            &nbsp;&nbsp;&nbsp;&nbsp;3. 折叠一个段落<br>
                        </div>
                        <img alt="json intro thumbnail" style="display: inline-block;width: 300px;" src="//cdn.feling.net/images/json-intro-thumbnail.png">
                    </div>
                    
                </p>
            </div>

            <h2>JSON 语法介绍</h2>
            <style>
                code {
                    background: #ccc;
                    border: 1px solid #e1e1e8;
                    padding: 0.2em 0.4em;
                    margin: 0;
                    font-size: 85%;
                    background-color: rgba(27,31,35,0.05);
                    border-radius: 3px;
                }
            </style>
            <div class="uk-text-left" > 
                <p>
                    json 字符串通常以这样的形式出现： <code>{"key": value,}</code> ，这样的一组结构在 json 中表示一个对象。其中：开头和结尾是一对花括号 <code>{}</code>；中间是以逗号 <code>,</code> 分割的 键值对；<br><br>

                    每个键值对中：<br> 
                    键 是一个字符串类型的数据，需要用引号 <code>"</code> 包裹，字符串中不能有换行符。<br>
                    键 和 值 之间用冒号 <code>:</code> 分割。<br><br>

                    而每个值，可能有：字符串<code>""</code>、数字、布尔<code>flase</code>、数组<code>[]</code>、对象、空<code>null</code> 这六种类型。
                </p>
            </div>
            <h2>其他 JSON 格式化方法 </h2>
            <div class="uk-text-left" >
                <h3>终端</h3>
                <p >
                    <span class="uk-text-top">终端中经常使用 <code style="vertical-align: top;">curl</code> 命令调用后端接口，配合 <code style="vertical-align: top;">jq</code> 命令可以实现 json 格式化。如图：</span> 
                    <img width="540" style="border-radius: 10px;" alt="json intro jq"
                         src="//cdn.feling.net/images/json-intro-jq.png">
                </p>
                <h3>Python</h3>
                <p>
                    Python 中打印格式化的 json 字符串，可以参考下面的示例代码：<br>
                    <pre>>>> import json
>>> json.dumps(some_object, indent=4, separators=(',', ': '))
                    </pre>
                </p>
                <h3>JavaScript</h3>
                <p>
                    JavaScript 中打印格式化的 json 字符串，可以参考下面的示例代码：<br>
                    参考文档：<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify" rel="nofollow">mozilla-json-stringify</a> <br>
                    <pre>JSON.stringify(someValue, null, 4)</pre> <br>
                </p>
            </div>
        </div>
    </div>

    <hr style="margin:0">
    <footer class="uk-grid uk-grid-small" style="background:#f6f6f6;padding: 10px 10px 0 10px;">
        <div class="uk-width-small-1-1 uk-width-medium-1-3 uk-text-small uk-text-muted">
            <span>
                由 聆熵信息技术 维护与更新
            </span><br><br>
            <span>
                开源地址: https://gitee.com/apihub/feling.net
            </span><br><br>
            <span>
                <a href="http://www.beian.miit.gov.cn" rel="nofollow">闽ICP备19012687号</a>
            </span>
        </div>
        <script>
            var _hmt = _hmt || [];
            (function() {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?7926b3f77abd3abf9b3a5c3ff9608acc";
                var s = document.getElementsByTagName("script")[0]; 
                s.parentNode.insertBefore(hm, s);
            })();
        </script>
        <a href="/book/" rel="nofollow" style="display: none;"></a>
    </footer>
</body>
</html>